<template>
<div>
    <!-- <query-box :queryForm="queryForm" @search="handleSearch" @reset="handleReset"></query-box> -->
    <query-current @search="search">
        <div slot="other" class="control-box">
            <el-popover
            placement="bottom"
            width="84"
            trigger="hover"
            v-model="visible2">
            <div class="choice-type-box">
                <template v-for="item in typeArray" >
                    <div :key="item.id" class="type-item" :class="{'active': uploadType == item.id}" @click="selectType(item)">{{item.name}}</div>
                </template>
            </div>
            <el-button type="primary" slot="reference">上传</el-button>
            </el-popover>
            <el-button style="margin-left:10px;">删除</el-button>
        </div>
    </query-current>
    <table-list :tableData="tableData" @flash="handleSearch" @add="handleAdd"></table-list>
    <add-dialog :addForm="addForm" @save="handleSave"></add-dialog>
    <UploadDialog ref="UploadDialog" :types="uploadType"></UploadDialog>
</div>
</template>

<script>
import AddDialog from './AddDialog'
import TableList from './TableList'
import QueryCurrent from '@/components/QueryCurrent'
import UploadDialog from '../uploadDialog'
export default {
    name: 'DataList',
    components: {
        AddDialog,
        TableList,
        QueryCurrent,
        UploadDialog

    },
    data () {
        return {
            tableData: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
                list: [
                    {
                        name: 'site_name',
                        id: 1
                    }
                ]
            },
            addForm: {
                show: false,
                title: '新增',
                form: {
                    name: '',
                    listVal: '',
                    time: []
                }
            },
            queryForm: {
                name: '',
                listVal: '',
                time: []
            },
            typeArray: [
                {
                    id: 0,
                    name: '本地文件'
                },
                {
                    id: 1,
                    name: 'HdFS文件'
                }
            ],
            uploadType: 0,
            visible2: false
        }
    },
    created () {
        // this.init()
    },
    methods: {
        handleSave () {
            console.warn('掉用保存的接口')
            this.init()
        },
        handleSearch () {
            this.tableData.currentPage = 1
            this.init()
        },
        init () {
            const params = {
                projectId: this.$projectId,
                keyword: this.keyword,
                pageSize: this.pageSize,
                pageNum: this.currentPage
            }
            this.$post('experiment/query', params).then(res => {
                const { total, rows } = res
                this.total = total
                this.tableData = rows
            })
        },
        handleReset () {
            this.queryForm = {
                name: '',
                listVal: '',
                time: []
            }
        },
        handleAdd (isNew, item) {
            this.addForm.show = true
            if (isNew) {
                this.addForm.title = '新增'
                console.warn('新增')
            } else {
                this.addForm.title = '修改'
                console.warn('修改', item)
            }
        },
        selectType (item) {
            this.uploadType = item.id
            setTimeout(() => {
                this.visible2 = false
            }, 500)
            this.types = item.id
            this.$refs.UploadDialog.dialogVisible = true
        },
        // 搜索列表查询
        search () {

        }
    }
}
</script>
